<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!--    <button onclick="aa()">开始请求后台接口</button>-->
    <button @click="aa()">开始请求后台接口</button>
  </div>
</template>

<script>
/**
 * fetchEventSource 使用get 请求不太好使 post请求没有问题  后台返回SseEmitter对象
 */
import {fetchEventSource} from '@microsoft/fetch-event-source';

export default {
  name: 'test',
  data() {
    return {
      msg: '你好 vue',
      chatProcessAggregate:{
        "aiChanelType":1,
        "aiModeType":1,
        "aiTextDto":{
          "sessionId":1,
          "question":"写一个java冒泡排序"
        },

      },
      param:"{\n" +
        "    \"aiModeType\": 1,\n" +
        "    \"aiTextDto\": {\n" +
        "        \"sessionId\": \"1\",\n" +
        "        \"question\": \"写一个java冒泡排序\"\n" +
        "    }\n" +
        "}",
    }
  },
  methods: {
    aa() {
      // const requestOptions = {
      //   method: 'GET', // 请求方法，SSE 通常是 GET 请求。如果涉及到双向通信，需要改为POST。
      //   // headers: {
      //   //   'Content-Type': 'application/json', // 设置内容类型为 SSE，即
      //   //   // 'Content-Type': 'text/event-stream', // 设置内容类型为 SSE，即
      //   // },
      //   // 可以添加其他需要的配置：
      //   // 如果为POST请求，需要携带body参数以传递请求体；
      //   // 如果希望用户切换到另一个页面后仍能保持SSE连接，可以配置openWhenHidden属性为true；
      //   // 如果需要使用AbortController来实现检测到问题终止连接的，可以配置signal属性等。
      // };
      const requestOptions = {
        method: 'POST', // 请求方法，SSE 通常是 GET 请求。如果涉及到双向通信，需要改为POST。
        headers: {
          'Content-Type': 'application/json', // 设置内容类型为 SSE，即
          'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6MCwibElkIjoxNDkzMDcxNDUzNzI4OTMxODQwLCJkZXZpY2VSZXF1ZXN0VHlwZSI6ImRlZmF1bHQiLCJTU09UT0tFTlRZUEUiOiJjb20uaHF4Lnprc2VydmVyLmNvbW1vbi51dGlsLmlubmVyLlRva2VuUGFyYW1zVE9LRU5ERUZBVUxUIiwiZXhwIjoxNzE0Mzc5MDM0LCJpYXQiOjE3MTQyODkwMzQsImp0aSI6IjFiZWNiMmIyLWNkYjMtNDg3Zi04Y2JmLTE0MjQxN2IxYTA5NiJ9.Yri5nOObsQlBeIlQMnVAqftrumaqBBp0nU7KzKvJuo0',
          'uuid': '123456',
        },
        // body: this.chatProcessAggregate,
        body: JSON.stringify(this.chatProcessAggregate),
        // body: this.param,

        openWhenHidden: true, // 取消visibilityChange事件
        // signal: ctrl.signal, // AbortSignal
        // 可以添加其他需要的配置：
        // 如果为POST请求，需要携带body参数以传递请求体；
        // 如果希望用户切换到另一个页面后仍能保持SSE连接，可以配置openWhenHidden属性为true；
        // 如果需要使用AbortController来实现检测到问题终止连接的，可以配置signal属性等。
      };

      fetchEventSource('https://s.haoqixingstem.com/api/xhl/chat/completions', {
        ...requestOptions,
        onopen(response) {
          console.log('Connection opened!', response);
        },
        onmessage(event) {
          console.log('Received message:', event.data);
        },
        onerror(error) {
          console.error('Error:', error);
          throw error;
        },
        onclose() {
          console.log('Connection closed!');
        },
      });

      // fetchEventSource('/api/chat/sseResponse', {
      //     method: 'POST',
      //     headers: {
      //       'Content-Type': 'application/json'
      //     },
      //     // body: JSON.stringify(chatMessageList.value),
      //     // openWhenHidden: true, // 取消visibilityChange事件
      //     // signal: ctrl.signal, // AbortSignal
      //     async onmessage(ev) {
      //       const data = JSON.parse(ev.data)
      //       if (data.sceneUuid !== sceneUuid.value) sceneUuid.value = data.sceneUuid
      //       if (data.token !== '') answer.value += data.token
      //       await nextTick()
      //       if (main.value) {
      //         const { scrollHeight } = main.value
      //         main.value.scrollTop = scrollHeight
      //       }
      //     },
      //     onclose() {
      //       if (answer.value) {
      //         const chatItem: ChatMessage = {
      //           id: String(chatsList.value.length + 1),
      //           content: answer.value,
      //           isMe: false
      //         }
      //         chatsList.value.push(chatItem)
      //         answer.value = ''
      //       }
      //       loading.value = false
      //     },
      //     onerror(err) {
      //       chatsList.value.pop()
      //       answer.value = ''
      //       loading.value = false
      //       ElMessage.error('对话请求发生网络错误或涉及违规话题')
      //       ctrl.abort()
      //       throw err // 直接抛出错误，避免反复调用
      //     }
      //   });

    },

    // 提交对话
    // fetchEventSource('/api/chat/sseResponse', {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json'
    //     },
    //     // body: JSON.stringify(chatMessageList.value),
    //     // openWhenHidden: true, // 取消visibilityChange事件
    //     // signal: ctrl.signal, // AbortSignal
    //     async onmessage(ev) {
    //       const data = JSON.parse(ev.data)
    //       if (data.sceneUuid !== sceneUuid.value) sceneUuid.value = data.sceneUuid
    //       if (data.token !== '') answer.value += data.token
    //       await nextTick()
    //       if (main.value) {
    //         const { scrollHeight } = main.value
    //         main.value.scrollTop = scrollHeight
    //       }
    //     },
    //     onclose() {
    //       if (answer.value) {
    //         const chatItem: ChatMessage = {
    //           id: String(chatsList.value.length + 1),
    //           content: answer.value,
    //           isMe: false
    //         }
    //         chatsList.value.push(chatItem)
    //         answer.value = ''
    //       }
    //       loading.value = false
    //     },
    //     onerror(err) {
    //       chatsList.value.pop()
    //       answer.value = ''
    //       loading.value = false
    //       ElMessage.error('对话请求发生网络错误或涉及违规话题')
    //       ctrl.abort()
    //       throw err // 直接抛出错误，避免反复调用
    //     }
    //   });

  }
}
</script>

